/**
 * Created by Hwa on 2017/11/17.
 */
import React,{Component} from 'react'

var echarts = require('echarts-loader');
function _getBaseSettings(){
  return {
    color:['#ff595f'],
    tooltip: {
      trigger: 'axis'
    },
    xAxis:  {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        color:'#999999',
      },
      axisLine:{
        show:false,
      },
      axisTick:{
        show:false,
      },
      data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
      type: 'value',
      name:'总数',
      nameLocation:'end',
      nameTextStyle:{
        align:'lef',
        fontSize:'0.75rem',
        color:'#999999',
      },
      axisLabel: {
        color:'#999999',
        formatter: '{value}'
      },
      axisLine:{
        show:false,
      },
      axisTick:{
        show:false,
      }
    },
    grid:{
      left:'4%',
      right:'3%',
      top:'13%',
      bottom:'12%',
    },
    series: [
      {
        name:'访问量',
        type:'line',
        symbol:'circle',
        symbolSize:'8',
        lineStyle:{
          normal:{
            color:'#ff595f',
          },
        },
        data:[11, 11, 15, 13, 12, 13, 10],
      },
    ]
  }
}

export default class extends Component {
  constructor(props) {
    super(...arguments);
    this._handleResize = function () {
      this.charts && this.charts.resize();
    }.bind(this);
  }

  componentDidMount() {
    this.setting = _getBaseSettings();
    this.charts = echarts.init(this.refs.chart);
    this.charts.setOption(this.setting);
    window.addEventListener('resize', this._handleResize, false)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this._handleResize);
    this.charts && this.charts.dispose();
  }

  render() {
    return (
      <div  ref="chart" className="chart" style={{height:'85%',width:'100%'}}>
      </div>
    );
  }
}
